# Progress

<Subtitle>Displays the status of a task that takes a long time.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React progress bar component that displays the status of a task that takes a long time."
/>

import { DemoProgressHero } from './demos/hero';

<DemoProgressHero />

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Progress } from '@base-ui-components/react/progress';

<Progress.Root>
  <Progress.Label />
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
  <Progress.Value />
</Progress.Root>;
```

## API reference

<Reference component="Progress" parts="Root, Track, Indicator, Value, Label" />
